import { Link } from "wasp/client/router";
import { Outlet } from "react-router-dom";
import { PageContainer, ProCard, ProLayout } from "@ant-design/pro-components";
import React, { useState } from "react";
import layoutProps from "./LayoutProps";

export const Layout: React.FC = () => {
  const [pathname, setPathname] = useState("/");

  return (
    <div
      style={{
        height: "100vh",
      }}
    >
      <ProLayout
        siderWidth={216}
        {...layoutProps}
        location={{
          pathname,
        }}
        menuItemRender={(item, dom) => (
          <Link
            onClick={() => {
              setPathname(item.path || "/");
            }}
            to={item.path as any}
          >
            {dom}
          </Link>
        )}
      >
        <div>
          <Outlet />
        </div>
      </ProLayout>
    </div>
  );
};
